<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/styletext11.css">
    <title>信息采集</title>
</head>

<body>
    <h3>选择你的性别&年龄</h3>
    <!-- 性别选择 -->
    <section class="clickon">
        <div class="cont_sex"><img src="./images/wan_sex_m.png" alt=""><span> 男</span></div>
        <div class="cont_sex"><img src="./images/wan_sex_w.png" alt=""><span> 女</span></div>
    </section>
    <!-- 年龄输入 -->
    <section class="agechoice">
        <input type="text" class="agetext" placeholder="请输入你的年龄">
        <p>* 年龄可用于为您推荐同龄的小伙伴</p>
    </section>

    <!-- 下一步按钮 -->
    <section class="nextbutton">
        <a href="styletext02.html"><button id="btn" >下一步</button></a>
    </section>

    <script src="./js/flexible.js"></script>
    <script>
        var sextag = document.getElementsByClassName('cont_sex')
        for (var i = 0; i < sextag.length; i++) {
            sextag[i].onclick = function() {
                for (var i = 0; i < sextag.length; i++) {
                    sextag[i].style.backgroundColor = '#f2f4f7'
                }

                this.style.backgroundColor = '#7cddf6'
            }
        }

        var btn = document.getElementById('btn')
        btn.onclick = function() {
            this.style.backgroundColor = '#f2f4f7'
        }
    </script>

</body>



</html>